頁尾

在這個範例中要練習頁尾部分的切版

整理幾個小重點如下方：

1.將footer_content設為滿版，添加背景色#FFEBF2
2.添加一個container，做為固定欄寬1200px的區塊
3.在container設定display: flex讓資料橫排顯示
4.使用justify-content: space-between讓資料可以平均分配剩餘空間寬度，讓第一項和最後一項貼齊邊緣
5.在這個版面中我把<h2>寫在LOGO上，但因為LOGO是圖片，為了讓他符合語意會添加span標籤寫上文字
6.但寫在LOGO上的文字要如何在頁面中不顯示，這邊我們將span的寬高都設為1px(width: 1px; height: 1px;)，再將超出的地方消失(overflow: hidden;)，最後使用絕對定位(position: absolute;)即可完成
7.font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距

提供格線圖如下方所示:

可參考程式碼如下方:

HTML

<footer class="footer_content">
    <div class="container">
        <ul class="footer_item">
            <h2>
                <img src="https://i.ibb.co/86SKRmY/mini-logo.png" alt="mini-logo">
                <span>小小白人的生活</span>
            </h2>
            <li><a href="#">小白人的生活</a></li>
            <li><a href="#">小白人的生活2</a></li>
        </ul>
        <ul class="footer_nav">
            <li class="title"><a href="#">小白人的誕生</a></li>
            <li class="list"><a href="#">生活系列</a></li>
            <li class="list"><a href="#">職場系列</a></li>
        </ul>
        <ul class="footer_nav">
            <li class="title"><a href="#">小白人的誕生</a></li>
            <li class="list"><a href="#">生活系列</a></li>
            <li class="list"><a href="#">職場系列</a></li>
        </ul>
        <ul class="footer_nav">
            <li class="title"><a href="#">小白人的誕生</a></li>
            <li class="list"><a href="#">生活系列</a></li>
            <li class="list"><a href="#">職場系列</a></li>
        </ul>
    </div>
</footer>

CSS

.footer_content{
    width: 100%;
    margin: auto;
    padding:80px;
    background-color: #FFEBF2;
}

.footer_content h2 span{
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
}
.footer_content .container{
    display: flex;
    width:1200px;
    margin: auto;
    justify-content: space-between;
}
.footer_content a{
    display: block;
    color: #464646;
}

.footer_content a:hover{
    color: #ffffff;
    transition: .3s;
}
.footer_content .footer_item li{
    font-weight: 400;
    font-size: 16px;
    margin: 20px 0;
    
}
.footer_content .footer_item{
    width: 600px;
}
.footer_content .footer_nav{
    width: 100px;
}
.footer_content .footer_nav li{
    font-weight: 200;
    font-size: 16px;
    margin-bottom: 20px;
}
.footer_content .footer_nav .list{
    font-size: 14px;
}